<template>
  <div>
    <el-table
        ref="multipleTable"
        :data="musicList"
        tooltip-effect="dark"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="sdata"
          :formatter="formatDate"
          label="上传日期"
          width="120">
      </el-table-column>
      <el-table-column
          prop="songname"
          label="歌曲信息"
          show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-upload
          class="avatar-uploader"
          :headers="{TOKEN: token}"
          :action="$axios.defaults.baseURL + '/api/msic/upload'"
          :on-success="uploadSuccess"
          :show-file-list="false"
          multiple>
        <el-button type="primary" round style=position:relative;left:-130px>上传音乐</el-button>
      </el-upload>
      <el-button type="primary" round style="width: 100px;position: relative;
    top: -40px;
    left: 150px;">删除</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "uploadmusic",
  data() {
    return {
      token : localStorage.getItem('TOKEN'),
      musicList: [],

    }
  },
  //用axios调用后端接口获取数据
  created() {
    this.$axios.get('/api/user/list', {headers: {TOKEN: localStorage.getItem('TOKEN')}}).then(res => {
      console.log(res.data.data[0].musicList)
      if (res.data.data != null && res.data.data.length > 0) {
        this.musicList = res.data.data[0].musicList;
      }

    })
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data ==='') {
        return ''
      }else {
        let dt = new Date(data)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
      }
    },
    uploadSuccess(res) {
      if (res.status === 1) {
        this.$message.success(res.msg);
      }
    },
  },
  mounted:function (){
    this.init()
  }

}
</script>

<style scoped>

</style>